<template>
  <view>
    <picker mode="multiSelector" @change="bindPickerChange" @columnchange="bindPickerColumnChange" :range="array"
      range-key="title">
      <view class="picker">{{showTitle?showTitle:'请选择'}}</view>
    </picker>
    <button @click="submit">提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        array: [
          [{
              id: 1,
              title: "主食"
            },
            {
              id: 2,
              title: "饮料"
            },
            {
              id: 3,
              title: "小吃"
            }
          ],
          [{
              id: 1,
              title: "牛肉汉堡"
            },
            {
              id: 2,
              title: "鸡肉汉堡"
            },
            {
              id: 3,
              title: "培根汉堡"
            }
          ]
        ],
        index1: 0,
        index2: 0,
        showTitle: ""
      };
    },
    methods: {
      bindPickerColumnChange(e) {
        let column = e.detail.column;
        let index = e.detail.value;
        if (column == 0) {
          // 第一列
          switch (index) {
            case 0: // 主食
              this.array[1] = [{
                  id: 1,
                  title: "牛肉汉堡"
                },
                {
                  id: 2,
                  title: "鸡肉汉堡"
                },
                {
                  id: 3,
                  title: "培根汉堡"
                },
              ];
              this.$set(this.array, 1, this.array[1]);
              break;
            case 1: // 饮料
              this.array[1] = [{
                  id: 1,
                  title: "可乐"
                },
                {
                  id: 2,
                  title: "雪碧"
                },
                {
                  id: 3,
                  title: "咖啡"
                },
              ];
              this.$set(this.array, 1, this.array[1]);
              break;
            case 2: // 小吃
              this.array[1] = [{
                  id: 1,
                  title: "薯条"
                },
                {
                  id: 2,
                  title: "鸡块"
                },
                {
                  id: 3,
                  title: "鸡柳"
                },
              ];
              this.$set(this.array, 1, this.array[1]);
              break;
          }
        }
        console.log(column, index, '---------------')
      },
      bindPickerChange(e) {
        console.log('bindPickerChange.......................')
        this.index1 = e.detail.value[0];
        this.index2 = e.detail.value[1];
        this.showTitle = this.array[0][this.index1].title + "-" + this.array[1][this.index2].title;
      },
      submit() {
        console.log(JSON.stringify(this.array[0][this.index1]), JSON.stringify(this.array[1][this.index2]))
      }
    }
  }
</script>

<style lang="scss">
  .picker {
    width: 500rpx;
    height: 80rpx;
    border: 1px solid #EEEFEF;
    line-height: 80rpx;
  }
</style>